<template>
  <div class="auth" style="margin-top:150px">
    <h2>{{ isLogin ? '登录' : '注册' }}</h2>
    <form @submit.prevent="handleSubmit">
      <div class="label-container" >
        <label for="username">昵称:</label>
        <input type="text" v-model="username" required />
      </div>
      <div class="label-container">
        <label for="password">密码:</label>
        <input type="password" v-model="password" required />
      </div>


  <div v-if="!isLogin" style="display: inline-block;margin-left:20px">
  <span>性别:</span>
  <el-radio-group v-model="gender" style="display: inline-block;margin-left:20px">
    <el-radio value="男" size="large">男</el-radio>
    <el-radio value="女" size="large">女</el-radio>
  </el-radio-group>
</div>
      <div v-if="!isLogin" class="label-container">
        <label for="address">地址:</label>
        <input type="text" v-model="address" required />
      </div>
      <div v-if="!isLogin" class="label-container">
        <label for="email">邮箱:</label>
        <input type="email" v-model="email" required />
      </div>

      <button type="submit" style="width:300px;margin-left:70px">{{ isLogin ? '登录' : '注册' }}</button>
    </form>
    <p>
      <span @click="toggleForm" class="toggle">
        {{ isLogin ? '没有账户? 注册' : '已有账户? 登录' }}
      </span>
    </p>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
    const isLogin = ref(true);
    const username = ref('');
    const password = ref('');
    const gender = ref('');
    const address = ref('');
    const email = ref('');
    const userId=ref()
    const handleSubmit = () => {
  if (isLogin.value) {
    // 登录逻辑
    axios.post("http://10.7.183.87:8080/login", {
    username: username.value,
    password: password.value,
}).then(response => {
    console.log(response.data.data)
    // 检查 code 字段
    if (response.data.code === 1) {
        alert('登录成功');
        localStorage.setItem('userId', response.data.data.userId); // 保存 userId
        localStorage.setItem('username', response.data.data.username);
        router.push({
        path: '/index',
  })
        // 这里可以执行登录成功后的逻辑，比如跳转页面
    } else {
        alert('登录失败: ' + response.data.msg);
    }
})
.catch(error => {
    alert('登录失败: ' + (error.response ? error.response.data.msg : error.msg));
});

  } else {
    // 注册逻辑
    axios.post("http://10.7.183.87:8080/register", {
        password: password.value,
        username: username.value,
        gender: gender.value,
        address:address.value,
        email:email.value,
    }).then(response => {
        // 检查 code 字段
        if (response.data.code === 1) {
            alert('注册成功');
            isLogin.value='登录'
            // 执行注册成功后的逻辑，比如跳转到登录页面
        } else {
            alert('注册失败: ' + response.data.msg);
        }
    })
    .catch(error => {
        alert('注册失败: ' + (error.response ? error.response.data.msg : error.msg));
    });
}

      // 清空表单
      username.value = '';
      password.value = '';
      gender.value='';
      address.value='';
      email.value='';
    };

    const toggleForm = () => {
      isLogin.value = !isLogin.value;
    };

  
</script>

<style scoped>
.auth {
  max-width: 400px;
  margin: 0 auto;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
}
h2 {
  text-align: center;
}
form {
  display: flex;
  flex-direction: column;
}
.label-container {
 margin-left: -40px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 右对齐 */
  margin-bottom: 0.5em;
}
label {
  text-align: right; /* 文字右对齐 */
  margin-right: 10px; /* 输入框与文字的距离 */
  flex-basis: 100px; /* 根据需要调整标签宽度 */
}
input {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 5px;
  flex: 1; /* 输入框自适应宽度 */
}
button {
  padding: 0.7em;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
.toggle {
  color: #007bff;
  cursor: pointer;
  text-align: center;
}
.toggle:hover {
  text-decoration: underline;
}
</style>